<template>
	<view class="content">
		<view class="activity">
			<view class="activityItem">
				<view class="activityImg">
					<image :src="data.courses.pic_s" mode="aspectFill">
					</image>
				</view>
				<view class="activityText">
					<view class="name">
						{{data.courses.title}}
					</view>
					<view class="label">
						<view class="">
							{{data.courses.school_title}}
						</view>
						<view class="">
							{{data.courses.applicable}}
						</view>
						<view class="">
							{{data.courses.pattern}}
						</view>
					</view>
					<view class="money">
						￥{{data.courses.price}}
					</view>
				</view>

			</view>

			<view class="realityMoney">
				实付款：￥{{data.order.price_pay}}
			</view>
		</view>

		<view class="form">
			<view class="type">
				<view class="typeItem" v-for="(item ,index) in data.poster" :style="{background:item.px?'rgba(240, 34, 38, 0.5)':'rgb(247,247,247)',color:item.px?'rgb(255,255,255)':''}" @click="activeType(index)">
					{{item.title}}
				</view>
			</view>

			<view class="rate">
				<u-rate :count="5" v-model="scoring" min-count="1" active-color="rgb(249,126,102)" size="40"
					gutter="18"></u-rate> <text style="margin-left: 20upx;">{{scoringText}}</text>
			</view>
			<textarea value="" placeholder="满意您就夸一夸" v-model="content"/>

<view class="" style="padding: 0 10upx;">
	<u-upload :action="action" :file-list="fileList" @on-change="upImg" @on-remove="escImg" max-count="9"></u-upload>
</view>
			
		</view>
		
		<view class="btn" @click="submit">
			提交
		</view>
<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'https://ilexue.top/home/upload/upload',
				data: {},
				order_id:'',
				scoring: 5,
				content:'',
				pic_set:[]
			}
		},
		computed: {
			// 计算属性的 getter
			scoringText: function() {
				let text = '满意'
				switch (this.scoring) {
					case 1:
						text = '非常差'
						break;
					case 2:
						text = '差'
						break;
					case 3:
						text = '一般'
						break;
					case 4:
						text = '满意'
						break;
					case 5:
						text = '非常满意'
						break;
				}
				return text
			}
		},
		onLoad(e) {
			this.order_id = e.order_id
			this.newData()
		},
		methods: {
			newData() {
				this.$myRuquest('home/user/order_comm', {
					order_id: this.order_id
				}).then(res => {
					if (res.code == 400) {
						this.data = res.data
						this.data.poster.forEach(item=>{
							item.px=false
						})
					}
				})
			},
			upImg(e) {
				let res = JSON.parse(e.data)
				if (res.code == 400) {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success'
					})
					this.pic_set.push(res.data)
				} else {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error'
					})
				}
			},
			escImg(index) {
				this.pic_set.splice(index,1)
			},
		  activeType(index){

				this.data.poster[index].px=!this.data.poster[index].px
			},
			submit(){
				let data={
					content:this.content,
					order_id:this.order_id,
					scoring:this.scoring,
					poster_id:[],
				}
				data.pic_set=this.pic_set?JSON.stringify(this.pic_set):''
				this.data.poster.forEach(item=>{
					if(item.px) data.poster_id.push(item.id);
				})
				data.poster_id=data.poster_id.join(',')
				this.$myRuquest('home/user/order_comm_save',data,'POST').then(res=>{
					if(res.code==400){
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
						uni.navigateBack({
						    delta: 1
						});
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 20upx;
		background-color: rgb(247,247,247);
	}

	.activity {
		padding: 20upx;
		padding-bottom: 0;
		background-color: #fff;
		border-radius: 12upx;

		.activityItem {
			display: flex;
			position: relative;
			margin-bottom: 20upx;

			.activityImg {
				width: 120upx;
				height: 120upx;
				border-radius: 12upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.activityText {
				margin: 0 20upx;
				width: calc(100% - 160upx);
				.name {
					font-weight: 900;
				}

				.label {
					display: flex;
					font-size: 20upx;
					margin: 14upx 0;
					color: #767676;

					view {
						padding: 0 20upx;
					}
view:nth-child(1){
	padding-left: 0;
}
					view:nth-child(1),
					view:nth-child(2) {
						border-right: 1upx solid #a8a8a8;
					}


				}

				.money {
					color: rgb(248, 95, 0);
					font-weight: 900;
				}
			}
		}

		.realityMoney {
			font-size: 24upx;
			margin-left: 20upx;
			border-bottom: 1upx solid rgb(247,247,247);
			margin-bottom: 20upx;
			padding-bottom: 20upx;
		}

	}

	.form {
		border-radius: 12upx;
		padding: 20upx;
		background-color: #fff;

		.type {
			display: flex;
			flex-wrap: wrap;

			.typeItem {
				margin: 10upx;
				padding: 5upx 10upx;
				border-radius: 10upx;
				background-color: rgba(240, 105, 18, .05);
				color: rgb(240, 105, 18);
			}
		}

		.rate {
			margin-bottom: 40upx;
		}

		textarea {
			width: calc(100% - 40upx);
			background-color: rgb(247,247,247);
			padding: 20upx;
			border-radius: 12upx;
		}
	}
	
	.btn {
		width: 500upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 100upx auto;
		margin-bottom: 0;
		border-radius: 12upx;
		background: linear-gradient(to right, rgb(254, 189, 140), rgb(254, 28, 77));
	}
</style>
